<template>
    <div>
      <el-container>
        <el-header class="el-header">小U商城后台管理系统
          <div>欢迎{{ $store.getters.getUser.username }}用户:{{ $store.getters.getUser.username }}<el-button @click="logout" type="danger" size="mini">退出</el-button></div>
        </el-header>
        <el-container>
          <el-aside width="220px">
              <v-nav></v-nav>
          </el-aside>
          <el-main>
              <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script>
  //引入局部组件
  import vNav from '../components/vNav'
  export default {
    data() {
      return {};
    },
    components:{
      vNav
    },
    methods:{
      //封装一个退出登录事件
    logout(){
      //触发行动 并移除存储
      this.$store.dispatch('changeUserInfoAction',false)
      //跳转到登录页面
      this.$router.push('/login')
    }
    }
  };
  </script>
  
  <style lang="less" scoped>
  .el-header {
    background: #ccc;
    text-align: center;
  }
  </style>
  